<template>
	<view>
		<!-- <u-navbar title="实名认证" :autoBack="true" placeholder></u-navbar> -->
		<view class="content">
			<view class="card">
				<view>
					<u--text text="头像面" bold color="#141414" margin="11px 0 10px 10px" size="17"></u--text>
					<u--text text="上传您的头像面" color="#7D7F83" size="12" margin="0 0 0 10px"></u--text>
				</view>
				<image @click="setImage('front')" :src="identity_z?identity_z:imgUrl+'front.png'"
					mode="aspectFill"></image>
			</view>
			<view class="card">
				<view>
					<u--text text="国徽面" bold color="#141414" margin="11px 0 10px 10px" size="17"></u--text>
					<u--text text="上传您的国徽面" color="#7D7F83" size="12" margin="0 0 0 10px"></u--text>
				</view>
				<image @click="setImage('reverse')" :src="identity_f?identity_f:imgUrl+'reverse.png'"
					mode="aspectFill"></image>
			</view>
			<view class="card" style="padding: 35rpx 30rpx;">
				<u--text text="姓名" color="#141414" size="16"></u--text>
				<u--input placeholder="请输入姓名" border="none" inputAlign="right" v-model="form.realname"></u--input>
			</view>
			<view class="card" style="padding: 35rpx 30rpx;">
				<u--text text="身份证号" color="#141414" size="16"></u--text>
				<u--input placeholder="请输入身份证号" border="none" inputAlign="right" v-model="form.identity"></u--input>
			</view>
		</view>
		<view class="footer">
			<view class="btn">
				<u-button text="确认提交" shape="circle" :customStyle="btnStyle" @click="submit"></u-button>
			</view>
			<view class="safe_height_bottom"></view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import graceChecker from '@/mixins/formVerify.js'
	export default {
		data() {
			return {
				imgUrl:this.$IMAGE_URL,
				form: {
					identity_z: "", //正面
					identity_f: "", //反面
					realname: "", //姓名
					identity: "", //身份证
				},
				rule: {
					identity_z: {
						type: String,
						required: true,
						message: "请上传身份证正面"
					},
					identity_f: {
						type: String,
						required: true,
						message: "请上传身份证反面"
					},
					realname: {
						type: String,
						required: true,
						message: "请输入姓名"
					},
					identity: {
						type: String,
						required: true,
						message: "请输入身份证号码"
					},
				},
				btnStyle: {
					background: "#FFC100",
					border: "none",
					height: "90rpx"
				},
				identity_z: "",
				identity_f: ""
			};
		},
		methods: {
			submit() {
				let transit = graceChecker.RuleValidation(this.form, this.rule);
				if (transit) {
					uni.showLoading({
						title: "加载中"
					})
					this.$http.post('wanlshop/user/identityReal', this.form).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							setTimeout(() => {
								this.$refs.uToast.show({
									type: 'default',
									message: "提交成功",
									duration: 1000,
									complete() {
										uni.switchTab({
											url:"/pages/my/index"
										})
									}
								})
							}, 150)
						}
					})
				}
			},
			setImage(type) {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: "加载中"
						})
						uni.uploadFile({
							url: this.$IMG_URL + 'common/upload',
							filePath: tempFilePaths[0],
							header: {
								token: uni.getStorageSync('token')
							},
							name: 'file',
							success: (uploadFileRes) => {
								uni.hideLoading()
								const res = JSON.parse(uploadFileRes.data)
								if (res.code == 1) {
									switch (type) {
										case 'front':
											this.identity_z = res.data.fullurl
											this.form.identity_z = res.data.url
											break;
										case 'reverse':
											this.identity_f = res.data.fullurl
											this.form.identity_f = res.data.url
											break;
									}
								}
							}
						});
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f7f9;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.card {
			background-color: #fff;
			padding: 45rpx 30rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			display: grid;
			grid-template-columns: 140px auto;
			grid-column-gap: 10px;

			image {
				width: 100%;
				height: 236rpx;
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 35rpx;
		border-top-right-radius: 35rpx;
		box-sizing: border-box;

		.btn {
			padding: 20rpx 30rpx;
		}
	}
</style>
